<template>
  <el-container style="height: 88vh;">
    <!-- 左侧导航栏 -->
    <el-aside width="220px" class="aside">
      <!-- 写文章按钮 -->
      <el-button type="primary" class="write-btn" @click="handleOpenArticle()">写文章</el-button>

      <!-- 菜单项 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        background-color="#f2f2f2"
        text-color="#333"
        active-text-color="#409EFF"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <i class="el-icon-house"></i>
          <span slot="title">首页</span>
        </el-menu-item>

        <!-- 内容管理 -->
        <ElSubMenu index="2">
          <template #title>
            <i class="el-icon-menu"></i>
            <span>内容管理</span>
          </template>
          <el-menu-item index="2-0">草稿箱</el-menu-item>
          <el-menu-item index="2-1">书籍管理</el-menu-item>
         <div  v-if="selectBook"> <el-menu-item index="2-4">{{selectBook.title}}章节管理</el-menu-item></div>
          <el-menu-item index="2-2">专栏管理</el-menu-item>
          <el-menu-item index="2-3">沸点管理</el-menu-item>
        </ElSubMenu>

        <!-- 数据中心 -->
        <ElSubMenu index="3">
          <template #title>
            <i class="el-icon-data-analysis"></i>
            <span>数据中心</span>
          </template>
          <el-menu-item index="3-1">内容数据</el-menu-item>
          <el-menu-item index="3-2">粉丝数据</el-menu-item>
        </ElSubMenu>

        <!-- 创作成长 -->
        <ElSubMenu index="4">
          <template #title>
            <i class="el-icon-s-claim"></i>
            <span>创作成长</span>
          </template>
          <el-menu-item index="4-1">创作等级权益</el-menu-item>
          <el-menu-item index="4-2">创作灵感</el-menu-item>
        </ElSubMenu>
      </el-menu>
    </el-aside>

    <!-- 中间内容 -->
    <el-container>
      <el-main class="main-content">
        <!-- 根据选中的菜单索引渲染不同的页面 -->
        <el-card v-if="activeIndex === '1'">
          <div class="user-info">
            <el-avatar size="large" src="https://vuejs.org/images/logo.png"></el-avatar>
            <div class="user-details">
              <h2>用户名</h2>
              <p>粉丝: 2 | 关注: 17 | 创作第 541 天</p>
            </div>
          </div>
        </el-card>

        <!-- 数据概览 -->
        <el-card v-if="activeIndex === '1'" class="data-overview">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card>
                <p>总粉丝数</p>
                <h3>2</h3>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <p>文章展现数</p>
                <h3>12,997</h3>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <p>文章阅读数</p>
                <h3>1,816</h3>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card>
                <p>文章点赞数</p>
                <h3>15</h3>
              </el-card>
            </el-col>
          </el-row>
        </el-card>

        <!-- 内容管理相关页面 -->
        <el-card v-if="activeIndex === '2-0'">草稿箱内容</el-card>
        <el-card v-if="activeIndex === '2-1'">
          <bookList @submit="getSelectBook"></bookList>
        </el-card>
        <el-card v-if="activeIndex === '2-2'">专栏管理页面</el-card>
        <el-card v-if="activeIndex === '2-3'">沸点管理页面</el-card>
        <el-card v-if="activeIndex === '2-4'">
          <div v-if="addOptionChapterLink">
            <chapterManagement :bookId="selectBook.id"></chapterManagement>
          </div>
        </el-card>

        <!-- 数据中心相关页面 -->
        <el-card v-if="activeIndex === '3-1'">内容数据页面<dataAnalysis></dataAnalysis></el-card>
        <el-card v-if="activeIndex === '3-2'">粉丝数据页面</el-card>

        <!-- 创作成长相关页面 -->
        <el-card v-if="activeIndex === '4-1'">创作等级权益页面</el-card>
        <el-card v-if="activeIndex === '4-2'">创作灵感页面</el-card>
      </el-main>
    </el-container>

    <!-- 右侧活动栏 -->
    <el-aside width="300px" class="aside-right">
      <el-card>
        <h3>创作活动</h3>
        <p>曼波阁欢迎你小子的加入</p>
        <p>赶紧加入曼波阁吧！！</p>
      </el-card>
      <el-card style="margin-top: 20px;">
        <h3>创作话题</h3>
        <ul>
          <li>#创作者训练营#</li>
          <li>#每日快讯#</li>
          <li>#曼波阁新人计划#</li>
        </ul>
      </el-card>
      <el-card style="margin-top: 20px;">
        <img :src="qrcode" alt="QR Code" />
      </el-card>
    </el-aside>
  </el-container>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import bookList from './components/bookList.vue';
import chapterManagement from './components/chapterManagement.vue';
import QRCode from 'qrcode';
import router from '@/router';

import dataAnalysis from './components/dataAnalysis.vue';
// 记录当前选中的菜单索引
const activeIndex = ref('1'); // 默认显示首页
const selectBook = ref();
const addOptionChapterLink = ref(false);
const qrcode = ref();
onMounted(()=>{
    QRCode.toDataURL('https://www.bilibili.com/video/BV18PtTeaE3T/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=e6ca8083e3ecf7d6704e3e8826a5f0dd')
      .then(url => {
        qrcode.value = url;
      })
      .catch(err => {
        console.error(err);
      });
  })

  

// 处理选择事件
const handleSelect = (index: string) => {
  activeIndex.value = index;
  console.log('当前选中的索引:', activeIndex.value);
};

const handleOpenArticle = () => {
  router.push('/book_create')
}

const getSelectBook = (book:{title: string,id: number})=>{
  selectBook.value = book;
  console.log(selectBook.value);
  
  addOptionChapterLink.value = true;
  activeIndex.value = '2-4';
}
</script>

<style scoped>
/* 左侧导航栏整体样式 */
.aside {
  background-color: #f2f2f2;
}

/* 写文章按钮样式 */
.write-btn {
  margin: 20px;
  width: calc(100% - 40px);
}

/* 用户信息区域样式 */
.user-info {
  display: flex;
  align-items: center;
}

.user-details {
  margin-left: 15px;
}

.main-content {
  padding: 20px;
}

/* 数据概览的样式 */
.data-overview {
  margin-top: 20px;
}

/* 活动栏样式 */
.aside-right {
  background-color: #f9f9f9;
  padding: 20px;
}

.el-card {
  padding: 20px;
}
</style>
